<template>
  <div>
    <br />
    <a-row>
      <a-col span="2">AES</a-col>
      <a-col span="22">
        <a-button class="btn" type="primary" size="small" @click="popBtnClick('encode')">加 密</a-button>
        <a-button class="btn" type="primary" size="small" @click="popBtnClick('decode')">解 密</a-button>
      </a-col>
    </a-row>
    <w-modal
      ref="WModal"
      :title="`AES${form.type == 'encode' ? '加密' : '解密'}`"
      :ok-type="form.data ? 'danger' : 'primary'"
      :ok-text="form.data ? '清 除' : '确 定'"
      @ok="okBtnClick"
    >
      <a-input v-model="form.value" type="textarea" placeholder="请输入..."></a-input>
      <br />
      <br />
      <a-input v-model="form.key" type="text" placeholder="请输入KEY...(长度16位)" />
      <w-copy-text v-if="form.data" :top="20" :text="form.data">
        {{
        form.data
        }}
      </w-copy-text>
    </w-modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Api } from "@/config/api";
import WModal, { ModalComType } from "@/components/global/modal";

@Component({
  name: "WebToolCryptoAes",
  components: {
    WModal,
  },
})
export default class WebToolCryptoAes extends Vue {
  form = {
    type: "",
    key: "",
    value: "",
    data: "",
  };

  popBtnClick(type: any) {
    this.form.key = "";
    this.form.value = "";
    this.form.data = "";
    this.form.type = type;
    (this.$refs.WModal as ModalComType).show()
  }

  okBtnClick() {
    if (this.form.data) {
      this.form.key = "";
      this.form.value = "";
      this.form.data = "";
      return;
    }
    if (this.form.key.length !== 16) {
      this.$message.error("key 长度必须是16位");
      return;
    }
    (this.$refs.WModal as ModalComType).showLoading()
    this.$wAxios
      .$post(Api.coding.aes, {
        key: this.form.key,
        type: this.form.type,
        input: this.form.value,
      })
      .then((data) => {
        this.form.data = data;
      })
      .catch(() => {})
      .finally(() => {
        (this.$refs.WModal as ModalComType).hideLoading()
      })
  }
}
</script>

<style scoped></style>
